<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello vue</title>
</head>
<body style="background-color: darkcyan">
<div id="app">
    <component1 v-bind:props-message=message height="哈哈" age=-999></component1>
    <!--如果使用v-bind会识别不了data的数据-->
<!--    <component1 props-message=message></component1>-->
</div>

<template id="component1">
    <div>
        <h2>{{propsMessage}}</h2>
        <h2>{{height}}</h2>
        <h2>{{age}}</h2>
    </div>
</template>

</body>
<script src="../css/vue.js"></script>
<script>
    /**
     * 之前我们说，组件不能直接使用Vue实例的数据，但是实际开发过程，组件使用Vue实例的数据很正常
     * 那我们组件要怎样才能使用Vue实例的数据呢？
     * 通过 Prop 向子组件传递数据
     *
     * 组件的对象里，使用props属性，props属性的值，可以是对象，也可以是用数值
     * props属性的值为是对象的好处就是可以定义传入的值可以定义类型要求，不符合类型要求的传参都会报错
     *
     * 注意一点：Prop 的大小写 (camelCase vs kebab-case)
     * HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名
     * 当在CLI创建的时候这个要求就不用了
     */

    const component1 = {
        template: "#component1",
        // props: ['propsMessage','height','age'],
        props: {
            // 检测类型
            propsMessage: String,
            height: String,
            // 检测类型 + 其他验证
            age: {
                type: Number,
                default: 0,
                required: true,
                validator: function (value) {
                    return value >= 0
                }
            }
        }
    }

    const app = new Vue({
        el: '#app',
        data: {
            message: "你好"
        },
        components: {
            'component1': component1
        }
    })

</script>
</html>
